<!DOCTYPE html>
<html lang="CN">

<head>
  <meta charset="UTF-8">
  <title>小球游戏</title>
  <style>
    * {
      box-sizing: border-box;
    }

    html {
      height: 100%;
    }

    body {
      margin: 0;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .ball {
      display: block;
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: #333;
      border-radius: 50%;
      overflow: hidden;
      top: 200px;
    }

    .bar {
      height: 10px;
      width: 150px;
      background-color: #664EE0;
      position: absolute;
      bottom: 10px;
      left: 50%;

    }

    .bottom_sec {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100px;
      border-top: 2px dashed black;
      /*background-color: red;*/
    }

    .score {
      background-color: #333;
      position: absolute;
      top: 50%;
      left: 35%;
      font-size: 50px;
      letter-spacing: 1rem;
      opacity: 0.4;
      color: #E5DADA;
      width: 500px;
      height: 150px;
      text-align: center;
      line-height: 150px;
      border-radius: 10px;
      border: 2px solid black;
    }
  </style>
</head>

<body>
  <p class="score">SCORE:0分</p>
  <div></div>
  <span class="ball"></span>
  <section class="bottom_sec">
    <div class="bar"></div>
  </section>

  <!-- 
				如果小球的bottom = 活动杆的bottom并且 小球的left > 干的left && 小球的right < 干的right   
		-->
  <script>

    var client_width = document.documentElement.clientWidth;
    var client_height = document.documentElement.clientHeight;
    var span_ele = document.querySelector('span');
    var span_top = 500;
    var span_left = 0;
    var div_ele = document.querySelector('section>div');
    var sec_ele = document.querySelector('section')

    change_top = 1;
    change_left = 0.5;

    /**
     * 创建警告框
     */
    var new_sec = document.createElement('section');
    new_sec.style.position = 'absolute';
    new_sec.style.left = '30%';
    new_sec.style.top = '30%';
    new_sec.style.width = '500px';
    new_sec.style.display = 'flex';
    new_sec.style.flexDirection = 'column';
    new_sec.style.alignItems = 'center';
    new_sec.style.justifyContent = 'space-between';
    new_sec.style.height = '500px';
    new_sec.style.backgroundColor = '#E4EC7B';
    new_sec.style.borderRadius = '20px';
    new_sec.style.fontSize = '50px';


    /*
     * 创建警告框里的元素
     */
    var new_span1 = document.createElement('span');

    new_span1.style.backgroundImage = 'url(images/Close.png)';
    new_span1.style.width = '20px';
    new_span1.style.height = '20px';
    new_span1.style.backgroundSize = '100% 100%';
    new_span1.style.alignSelf = 'flex-end';
    new_span1.style.margin = '1rem';
    new_sec.appendChild(new_span1);

    new_span1.onclick = function () {
      document.body.removeChild(new_sec);
    }



    // 创建警告框里面的文字
    var new_p = document.createElement('p');
    new_p.innerHTML = '游戏失败';
    new_p.style.fontSize = '30px';
    new_sec.appendChild(new_p);

    var new_span2 = document.createElement('span');
    new_span2.style.backgroundColor = '#333';
    new_span2.style.color = 'white';
    new_span2.style.padding = '0.5rem';
    new_span2.style.borderRadius = '5px';
    new_span2.innerHTML = '确认';
    new_span2.style.fontSize = '16px';
    new_span2.style.alignSelf = 'flex-end';
    new_span2.style.margin = '1rem';
    new_sec.appendChild(new_span2);


    function down() {
      if ((span_ele.offsetTop == client_height - 65 && span_ele.offsetLeft > div_ele.offsetLeft - 25 && span_ele.offsetLeft < div_ele.offsetLeft + 175) || span_top < 0) {
        // alert('1111');
        change_top = -change_top;
      }
      else if (span_ele.offsetTop > client_height) {

        document.body.appendChild(new_sec);
        return;
      }
      // if (span_top > client_height - 100 || span_top < 0) {
      // 	change_top =- change_top;
      // }
      if (span_left > client_width - 50 || span_left < 0) {
        change_left = - change_left;
      }
      span_top += change_top;
      span_left += change_left;
      span_ele.style.top = span_top + 'px';
      span_ele.style.left = span_left + 'px';

    }
    setInterval(down, 1);


    // 控制下面的小棒移动
    sec_ele.onmousemove = function (e) {
      if (e.pageX < client_width - 150 && e.pageX > 0) {
        div_ele.style.left = e.pageX + 'px';
      }

    }

    /**
     * 创建界面最上面的小方块
     */
    var in_left = 0;
    var in_top = 0;
    function square() {

      var r3 = Math.random() * 360;
      var new_square = document.createElement('div');
      new_square.style.position = 'absolute';
      new_square.className = 'square';
      new_square.style.display = 'inline-block';
      new_square.style.width = '50px';
      new_square.style.height = '50px';
      new_square.style.left = in_left + 'px';
      new_square.style.top = in_top + 'px';
      new_square.style.backgroundColor = 'hsl(' + r3 + ',' + '100%,50%)';
      new_square.style.border = '1px solid black';

      document.body.appendChild(new_square);
    }
    for (var i = 0; i < 200; i++) {
      square();
      in_left += 50;
      if (in_left + 50 > client_width) {
        in_left = 0;
        in_top += 50;
      }

    }

    // 遍历小方块
    var squareClass = document.getElementsByClassName('square');
    var score = 0;
    setInterval(function () {
      for (var i = 0, length1 = squareClass.length; i < length1; i++) {
        var squareClass_dis = squareClass[i];
        if (span_ele.offsetLeft > squareClass_dis.offsetLeft - 25 && span_ele.offsetLeft < squareClass_dis.offsetLeft + 50 - 25 && span_ele.offsetTop > squareClass_dis.offsetTop - 50 && span_ele.offsetTop < squareClass_dis.offsetTop + 50) {
          score++;
          document.querySelector('p').innerHTML = 'SCORE:' + score + '分';
          change_top = - change_top;
          squareClass_dis.classList.add('down');
          document.body.removeChild(squareClass_dis);
        }
      }
    }, 1)
  </script>
</body>


</html>